blink
Library for user behaviour tracking.
Goals
The main goal is to make tracking of user behavior in news sites easy.
- easy to configure
- fast
- small bundle size
- don't store more than neccessary
Pageload Tracking
- Is the user a DB Pluss user?
- Which ab-testing group is the user a part of?
Element Tracking
This can be tracking of elements like article previews and ads.
- has it been seen by the user (inscreen)?
- has it been clicked on by the user (clicks)?
- has it been loaded (load)?
- where is it on the page (position)?
- where was the user when it loaded (load position)?
Ad Tracking
Activity Tracking
Tracking of general user activity.
- how long has the user been active on the page (active time)?
- stop the active time counter if the user is inactive for n seconds or makes the page inactive
- how much of an article has the user read?
Usage
import createBlink from '@aller/blink';
const blink = createBlink({
send: event => console.log(event),
utils: {
getScrollHeight: () => document.documentElement.scrollHeight,
getClientHeight: () => document.documentElement.clientHeight,
getClientWidth: () => document.documentElement.clientWidth,
},
useDevTools: true,
});
blink.pageInit({
url: 'http://dinside.no/a/93289234',
referrer: document.referrer,
userId: 'f7a8cad1-773a-4041-b81f-bd1bf9843465',
abCookie: 51,
commercialSegments: 'sport,soccer,gardening',
site: window.location.hostname,
});
blink.pageLoad({
url: 'http://dinside.no/a/93289234',
cmId: 'c9e0eb73-cdde-45f4-a2a0-2811d24ff5b4',
plussData: { hasAccess: true, customerNumber: '123' },
});
blink.click({ url: 'http://seher.no/a/12931093' });
blink.adScreenEnter('ad-topbanner');
blink.adScreenExit('ad-topbanner');
blink.adScreenEnter0('ad-medium-rectangle');
blink.adScreenExit0('ad-medium-rectangle');
blink.adLoad({ id: 'ad-medium-rectangle', offsetTop: 200, offsetHeight: 450, scrollTop: 100 });
blink.dfpImpressionViewable({ id: 'ad-medium-rectangle', scrollTop: 100 });
blink.dfpSlotRenderEnded({
id: 'ad-medium-rectangle',
adUnitPath: '/8578/dagbladet.no/seksjoner/kjendis/artikkel',
advertiserId: 29318043,
campaignId: 123018391,
creativeId: 123908149018,
lineItemId: 344329408239,
size: [300, 250]
sourceAgnosticCreativeId: 123908149018,
sourceAgnosticLineItemId: 344329408239,
scrollTop: 100
});
blink.dfpSlotOnload({
id: 'ad-medium-rectangle1',
name: 'medium-rectangle1',
scrollTop: 100,
});
blink.articlePreviewScreenEnter({
url: 'http://seher.no/kjendis/surprising-title/123980243',
title: 'Surprising title!',
height: 380,
width: 400,
personalizationParametersRequested: 'xavier-pluss',
personalizationSystemUsed: 'cerebro',
position: 5,
});
blink.articlePreviewScreenExit('http://seher.no/kjendis/surprising-title/123980243');
articleActivityStart('http://seher.no/kjendis/surprising-title/123980243', 0.43);
articleActivityStop('http://seher.no/kjendis/surprising-title/123980243');
API
PageInit
Should be called on a page initialization. Sets the pageView and computes values that will not change over the course of the page view.
pageInit({ url, pageView, previousPageView });
Pageload
pageLoad({ url, cmId, plussData });
Clicks
click(url);
Ads
adScreenEnter(id);
adScreenExit(id);
adScreenEnter0(id);
adScreenExit0(id);
adLoad({ id, scrollTop, scrollHeight });
dfpImpressionViewable({ id });
dfpSlotRenderEnded({
id,
adUnitPath,
advertiserId,
campaignId,
creativeId,
lineItemId,
size,
sourceAgnosticCreativeId,
sourceAgnosticLineItemId,
});
dfpSlotOnload({ id, name });
Impression
articlePreviewScreenEnter({
url: string,
title: string,
height: number,
width: number,
personalizationParametersRequested: string,
personalizationSystemUsed: string,
position: integer,
});
articlePreviewScreenExit(url);
Active Time
articleActivityStart(url, maxScroll);
articleActivityStop(url);